<%--
  Created by IntelliJ IDEA.
  User: mrcode
  Date: 2016/9/14
  Time: 22:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" href="/assets/lib/bootstrap/css/bootstrap.css">
    <title>Title</title>
    <style>
        .mr-select-div{
            position: absolute;
            top:0;
            display: none;
            z-index: 3;
            width: 100%;
            padding: 6px 12px;
            color: #555555;
            background-color: #ffffff;
            background-image: none;
            border-radius: 4px;
            -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            border-color: #66afe9;
            outline: 0;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
        }
    </style>
</head>
<body class="container">
<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
        </div>
    </div>
    <div class="form-group">
        <label for="test" class="col-sm-3 control-label">Password</label>
        <div class="col-sm-8">
            <input class="form-control mr-select" id="test" readonly>
            <div class="mr-select-div">
                月饼<br>
                月饼<br>
                月饼<br>
                月饼<br>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
            <input class="form-control mr-select" readonly>
            <div class="mr-select-div">
                月饼<br>
                月饼<br>
                月饼<br>
                月饼<br>
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Remember me
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-10">
        <label>Email address</label>
        <input class="form-control mr-select" readonly>
        <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
        <div class="mr-select-div">
            月饼<br>
            月饼<br>
            月饼<br>
            月饼<br>
        </div>
            </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Sign in</button>
        </div>
    </div>
</form>
</body>
<script src="/assets/lib/jquery/jquery.min.js"></script>
<script>
    $(".mr-select").click(function () {
        var div = $(this).parent().find(".mr-select-div");
        div.width($(this).width() + 5);
        div.fadeIn("fast");
    });
    $(".mr-select-div").mouseout(function () {
        $(this).fadeOut("fast");
    })
</script>
</html>
